<template>
  <div class="home">
    <div style="height: 75px">
      <van-sticky>
        <!-- 头部 -->
        <div class="header">
          <div class="headerTop">
            <div class="headerTopText">网易严选</div>
            <!-- v-model="value" -->
            <van-search placeholder="搜索商品，共14889款好物" @click="toSearchPage" />
            <van-button size="mini" plain type="danger">登录</van-button>
          </div>
          <div class="headerBottom">
            <van-tabs @click="toSearch" @click-tab="changeNavId">
              <van-tab line-height="1px" title="推荐"></van-tab>
              <van-tab v-for="(logItems1, index) in cateNameList" :key="index" :name="logItems1.id"
                :title="logItems1.name"></van-tab>
            </van-tabs>
          </div>
        </div>

        <!-- 右边点击箭头 -->
        <div class="log">
          <div class="logs">
            <div class="logHeader">
              <div class="logLeft" v-if="pigeId">全部频道</div>
              <van-icon v-show="pigeId" name="arrow-up" @click="toPage" />
              <van-icon name="arrow-down" v-show="!pigeId" @click="toPage" />
            </div>
            <div class="logCenter" v-if="pigeId === true">
              <div class="logItem" v-for="(logItems, index) in cateNameList" :key="index" @click="toLog(index)">
                {{ logItems.name }}
              </div>
            </div>
          </div>

          <div class="logBg" v-if="pigeId" @click="cancel"></div>
        </div>
      </van-sticky>
    </div>

    <div class="main" v-show="currentId === 0">
      <!-- 轮播图 -->
      <div class="swiper">
        <van-swipe class="my-swipe" :autoplay="4000" indicator-color="white">
          <van-swipe-item v-for="swiper in focusList" :key="swiper.id">
            <img class="swiperImg" :src="swiper.picUrl" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 自营 -->
      <ul class="grow">
        <li class="growList" v-for="(grows, index) in policyDescList" :key="index">
          <!-- <span class="growImg">{{ grows.icon }}</span> -->
          <img class="growImg" :src="grows.icon" alt="" />
          <span class="growText">{{ grows.desc }}</span>
        </li>
      </ul>

      <!-- 新品首发 -->
      <div class="navList">
        <div class="nav" v-for="(navs, index) in kingKongList.kingKongList" :key="index">
          <img class="navImg" :src="navs.picUrl" alt="" />
          <span class="navText">{{ navs.text }}</span>
        </div>


      </div>

      <!-- 春日热销榜 -->
      <div class="imgsList">
        <div class="imgs">
          <img class="imgOne" src="https://yanxuan.nosdn.127.net/static-union/16805987434a5424.png" alt="" />
          <img class="imgTwo"
            src="https://yanxuan-item.nosdn.127.net/37cd74a4110236ae21c540a4bc7a7cb5.png?quality=75&type=webp&imageView&thumbnail=160x160"
            alt="" />
        </div>

        <div class="imgs">
          <img class="imgOne" src="https://yanxuan.nosdn.127.net/static-union/168007281899b6d3.png" alt="" />
          <img class="imgTwo" src="https://yanxuan-item.nosdn.127.net/54a2767366cbd6f367ef0352ff5c072a.png" alt="" />
        </div>
        <div class="imgs">
          <img class="imgOne" src="https://yanxuan.nosdn.127.net/static-union/1680598965bf99ac.png" alt="" />
          <img class="imgTwo" src="https://yanxuan-item.nosdn.127.net/9a33f08a3b0f5c06fdf4c586d51b2f7c.png" alt="" />
        </div>
      </div>

      <!-- 新人专享礼 -->
      <div class="context">
        <span class="contextLeft">——</span>
        <span class="contextMain">新人专享礼</span>
        <span class="contextRight">——</span>
      </div>
      <div class="special">
        <div class="specialLeft">
          <span class="specialLeftText">新人专项礼包</span>
          <img class="specialLeftImg" src="https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" alt="" />
        </div>
        <div class="specialRight">
          <div class="specialRightTop" v-for="(spec, index) in activeTop" :key="index">
            <span class="specialRightTop1">{{ spec.title }}</span>
            <span class="specialRightTop2">{{ spec.subTitle }}</span>
            <img class="specialRightTopImg" :src="spec.picUrl" alt="" />
          </div>
          <!-- <div class="specialRightBottom">
            <span class="specialRightBottom1">新人拼团</span>
            <span class="specialRightBottom2">一元起包邮</span>
            <img
              class="specialRightBottomImg"
              src="https://yanxuan-item.nosdn.127.net/2154516688dae250913515e043d1c8b2.png?quality=75&type=webp&imageView&thumbnail=200x200"
              alt=""
            />
          </div> -->
        </div>
      </div>

      <!-- 类目热销榜 -->
      <div class="class">
        <span class="classText">{{ categoryHotSellModule.title }}</span>
      </div>
      <!-- v-for="(item,index) in categoryHotSellModule.categoryList" :key="index" -->
      <!-- 类目热销榜 -->
      <div class="classList">
        <div class="classListTop">
          <div class="classListOne" v-for="(item, index) in twocategoryList" :key="index">
            <span class="classListText">{{ item.categoryName }}</span>
            <img class="classListImg" :src="item.picUrl" alt="" />
          </div>
        </div>
        <div class="classListBottom">
          <div class="classListBottomList" v-for="(items, index) in leftOvercategoryList" :key="index">
            <div class="classBox">
              <span class="classListBottomText">{{ items.categoryName }}</span>
              <img class="classListBottomImg" :src="items.picUrl" alt="" />
            </div>
          </div>
        </div>
      </div>

      <!-- 数据消失，没办法渲染 -->
      <!-- 好好睡 -->
      <div class="sleepList">
        <div class="sleepLeft">
          <span class="sleepLeft1">好好睡</span>
          <span class="sleepLeft2">黑科技床品</span>
          <img class="sleepLeftImg"
            src="https://yanxuan.nosdn.127.net/static-union/1660133093322965.png?quality=75&type=webp&imageView&thumbnail=150x150"
            alt="" />
        </div>
        <div class="sleepRight">
          <span class="sleepRight1">严选直播</span>
          <span class="sleepRight2">种草攻略</span>
          <div class="sleepRightImgs">
            <img class="sleepRightImg1"
              src="https://yanxuan-item.nosdn.127.net/91a264d84fed57f97c48dc107370e941.png?quality=75&type=webp&imageView&thumbnail=150x150"
              alt="" />
            <img class="sleepRightImg2"
              src="https://yanxuan-item.nosdn.127.net/f8be60304cfac80a103bac65d4e5b09f.png?quality=75&type=webp&imageView&thumbnail=150x150"
              alt="" />
          </div>
        </div>
      </div>

      <!-- 底部 -->
      <div class="footList">
        <div class="footTop">
          <div class="footTop1">下载APP</div>
          <div class="footTop2">电脑版</div>
        </div>
        <div class="footBottom">
          <span class="footBottom1">网易公司版权所有 © 1997-2023 </span>
          <span class="footBottom2">食品经营许可证：JY13301080111719</span>
        </div>
      </div>
    </div>

    <!-- 楼层 -->
    <Storey :categoryList="categoryList" v-show="currentId !== 0"></Storey>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import router from '@/router'
export default defineComponent({
  name: 'Attr'
})
</script>
<script lang="ts" setup>
import { useChannelStore } from '@/stores/channel'
import { useHomeStore } from '@/stores/home'
import { onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import Storey from './components/Storey/index.vue'
import { useRouter } from 'vue-router'

const store = useHomeStore()
const store1 = useChannelStore()

const isShow = ref(true)
const pigeId = ref(false)
const currentId = ref(0)
const toLogS = ref(0)
const user = useRouter()
// store
const {
  focusList,
  policyDescList,
  kingKongList,
  indexActivityModule,
  sceneLightShoppingGuideModule,
  activeTop
} = storeToRefs(store)
const { categoryHotSellModule, categoryList, twocategoryList, leftOvercategoryList } =
  storeToRefs(store)

// store1
const { cateNameList } = storeToRefs(store1)

onMounted(() => {
  store.getHome()
  store1.getChannel(1005000)
})

const changeNavId = async (event: any) => {
  console.log(event.name)
  currentId.value = 1
  await store1.getChannel(event.name)
}

const toPage = () => {
  pigeId.value = !pigeId.value
}

const toSearch = () => {
  isShow.value = !isShow.value
}

const cancel = () => {
  pigeId.value = false
}

const toLog = (index: number) => {
  toLogS.value = index
}

// 到搜索页面
const toSearchPage = () => {
  router.push('/search')
}
</script>

<style lang="less" scoped>
.home {

  // height: 3000px;
  .header {
    height: 74px;
    background-color: #fff;

    // position:fixed;
    // top: 0;
    // overflow: hidden;
    .headerTop {
      display: flex;
      height: 44px;
      justify-content: space-around;
      align-items: center;
      padding: 6px 12px 0;

      .headerTopText {
        font-weight: 600;
        // background-color: aqua;
        // width: 69px;
        // height: 20px;
        font-size: 16px;
        text-align: center;
        // line-height: 44px;
      }

      .van-search {
        width: 250px;
        height: 28px;
      }
    }

    .headerBottom {
      :deep(.van-tab) {
        padding: 0 22px;
      }

      // .van-tab{
      //   padding: 0  30px 0;
      // }
      // .headerBottomOne {
      //   &.active {
      //     border-bottom: 1px solid red;
      //     color: red;
      //   }
      //   .headerBottomText {
      //     // width: 42px;
      //     // height: 23px;
      //     // line-height: 30px;
      //     // font-weight: 100;
      //     // font-size: 15px;
      //     // margin-right: 30px;
      //   }
      // }
    }
  }

  .log {
    position: relative;
    width: 100%;

    // height: calc(100% - 160px);
    // height: 700px;
    // background-color: rgba(0, 0, 0, 0.6);
    .logs {
      position: fixed;
      // position: relative;
      top: 60px;
      right: 0;
      // height:calc(100% - 110px) ;
      box-sizing: border-box;
      z-index: 999;
      // height: 186px;
      height: 30px;
      background: #ffffff;

      .logHeader {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        padding: 0 15px;
        height: 30px;
        line-height: 30px;

        .van-icon {
          width: 15px;
          float: right;
        }
      }

      .logCenter {
        background-color: #fff;

        padding: 43px 15px 0;
        padding-top: 12px;
        display: flex;
        z-index: 999999;
        justify-content: space-between;
        // flex-direction: column;
        align-items: center;
        flex-wrap: wrap;

        .logItem {
          margin-bottom: 20px;
          width: 75px;
          height: 28px;
          border: 1px solid #ccc;
          background-color: #fafafa;
          box-sizing: border-box;
          text-align: center;
          line-height: 28px;
          font-size: 14px;
          font-weight: 100;

          &.active {
            border: qpx solid #f43535;
            color: #f43535;
          }
        }

        &::after {
          content: '';
          display: block;
          width: 165px;
          background-color: #4f67f1;
        }
      }

      // &::after {
      //   content: '';
      //   display: block;
      //   width: 100%;
      //   height: 370px;
      //   background-color: rgba(0, 0, 0, 0.3);
      // }
    }
  }

  .logBg {
    position: absolute;
    top: 20px;
    width: 100%;
    left: 0;
    height: calc(100vh - 143px);
    z-index: 998;
    background-color: rgba(0, 0, 0, 0.3);
  }

  // .actives {
  //   height: calc(100vh - 94px -151px);
  //   background-color: #4f67f1;
  // }

  .main {
    height: calc(100% - 145px);

    .swiper {
      // height: 148px;
      // width: 100px;
      // margin-top: 8px;
      // background-color: #943636;
      margin-top: 20px;

      :deep(.van-swipe__indicator) {
        width: 25px;
        height: 2px;
        border-radius: 0;
      }

      .swiperImg {
        width: 375px;
        height: 148px;
      }
    }

    .grow {
      display: flex;
      height: 30px;
      // justify-content: center;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;

      .growList {
        // text-align: center;
        width: 118px;
        height: 16px;
        font-size: 13px;
        color: #7b7b7b;

        .growImg {
          width: 16px;
          height: 16px;
          margin-right: 2px;
        }
      }
    }

    .navList {
      display: flex;
      flex-wrap: wrap;
      height: 175px;
      justify-content: space-around;

      .nav {
        display: flex;
        flex-direction: column;
        width: 56px;
        height: 78px;
        // background-color: #cb4141;
        margin: 0 7px;

        .navImg {
          margin: 0 auto;
          width: 55px;
          height: 55px;
          margin-bottom: 2px;
        }

        .navText {
          font-size: 12px;
          color: #7b7b7b;
        }
      }
    }

    .imgsList {
      display: flex;
      justify-content: space-around;
      padding: 0 4px;

      .imgs {
        // display: flex;
        position: relative;

        .imgOne {
          width: 115px;
          height: 110px;
        }

        .imgTwo {
          position: absolute;
          width: 70px;
          height: 70px;
          top: 38px;
          left: 22px;
        }
      }
    }

    .context {
      height: 45px;
      // background-color: #c42424;
      display: flex;
      font-size: 16px;
      align-items: center;
      justify-content: center;

      .contextMain {
        margin: 0 8px;
      }
    }

    .special {
      height: 219px;
      display: flex;
      justify-content: space-around;
      padding: 0 8px 16px;

      .specialLeft {
        background-color: #f9e9cf;
        width: 171px;
        height: 217px;

        display: flex;
        flex-direction: column;

        .specialLeftText {
          padding: 15px 0 0 15px;
          font-size: 16px;
        }

        .specialLeftImg {
          margin: auto;
          width: 129px;
          height: 129px;
        }
      }

      .specialRight {
        width: 171px;
        height: 219px;

        .specialRightTop {
          margin-bottom: 2px;
          border-radius: 10px;
          height: 98px;
          display: flex;
          flex-direction: column;
          background-color: #fbe2d3;
          padding: 10px 0 0 10px;
          position: relative;

          .specialRightTop1 {
            font-size: 15px;
          }

          .specialRightTop2 {
            font-size: 14px;
            font-weight: 100;
          }

          .specialRightTopImg {
            width: 100px;
            height: 100px;
            display: flex;
            position: absolute;
            right: 0px;
            bottom: 0;
          }
        }

        .specialRightBottom {
          border-radius: 10px;

          height: 98px;
          display: flex;
          flex-direction: column;
          background-color: #ffecc2;
          padding: 10px 0 0 10px;
          position: relative;

          .specialRightBottom1 {
            font-size: 16px;
          }

          .specialRightBottom2 {
            font-size: 14px;
            font-weight: 100;
          }

          .specialRightBottomImg {
            width: 100px;
            height: 100px;
            display: flex;
            position: absolute;
            right: 0px;
            bottom: 0;
          }
        }
      }
    }

    .class {
      height: 50px;
      padding: 0 15px;

      // background-color: #ef2c2c;
      .classText {
        font-size: 18px;
        font-weight: 100;
        line-height: 50px;
      }
    }

    .classList {
      height: 305px;
      padding: 0 15px;

      // background-color: #ce1d1d;
      .classListTop {
        display: flex;
        height: 100px;
        justify-content: space-between;

        .classListOne {
          width: 170px;
          background-color: #dcdae1;
          display: flex;
          align-items: center;

          .classListText {
            display: block;
            font-size: 13px;
            margin-left: 5px;
          }

          .classListText::after {
            content: '——';
          }

          .classListImg {
            width: 100px;
            height: 100px;
          }
        }
      }

      .classListBottom {
        display: flex;
        flex-wrap: wrap;

        // justify-content: space-between;
        .classListBottomList:nth-child(4n) {
          padding-right: 0;
        }

        .classListBottomList {
          margin-top: 5px;
          width: 25%;
          height: 90px;
          padding-right: 5px;
          box-sizing: border-box;

          // display: flex;
          // flex-shrink: 0;
          .classBox {
            text-align: center;
            // display: flex;
            // flex-direction: column;
            // align-items: center;
            height: 90px;

            background-color: #f5f5f5;

            .classListBottomText {
              font-size: 14px;
              margin-top: 5px;
            }

            .classListBottomImg {
              width: 60px;
              height: 60px;
            }
          }
        }
      }
    }

    .sleepList {
      height: 156px;
      display: flex;
      padding: 0 15px;
      justify-content: space-between;

      .sleepLeft {
        padding: 12px 0;
        box-sizing: border-box;

        background-color: #f5f5f5;

        width: 120px;
        height: 135px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .sleepLeft1 {
          font-size: 18px;
        }

        .sleepLeft2 {
          font-size: 13px;
          font-weight: 100;
          color: #7f7f7f;
        }

        .sleepLeftImg {
          width: 72px;
          height: 72px;
        }
      }

      .sleepRight {
        width: 220px;
        height: 135px;
        display: flex;
        flex-direction: column;
        background-color: #f5f5f5;
        padding: 12px 0 12px 25px;
        box-sizing: border-box;

        .sleepRight1 {
          font-size: 18px;
        }

        .sleepRight2 {
          font-size: 13px;
          font-weight: 100;
          color: #7f7f7f;
        }

        .sleepRightImgs {
          display: flex;

          .sleepRightImg1 {
            width: 72px;
            height: 72px;
          }

          .sleepRightImg2 {
            width: 72px;
            height: 72px;
            margin: 0 2px 0 28px;
          }
        }
      }
    }

    .footList {
      height: 200px;
      background-color: #414141;
      display: flex;
      flex-direction: column;
      align-items: center;

      .footTop {
        width: 190px;
        height: 40px;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #fff;
        margin: 20px;
        text-align: center;

        .footTop1 {
          // padding: 5px 20px;
          line-height: 31px;
          width: 86px;
          border: 1px solid #999999;
          border-radius: 3px;
        }

        .footTop2 {
          // padding: 5px 20px;
          width: 86px;
          line-height: 31px;

          border: 1px solid #999999;
          border-radius: 3px;
        }
      }

      .footBottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
</style>
